import React, {useState, useEffect} from 'react';
import styled from 'styled-components';
import {Table, Tag, Space, Switch, message} from 'antd';
import OperaModal from '../../../components/OperaModal';
import axios from '../../../http/axios';
import {addKey} from '../../../components/TableAddKey';
const Wrapper = styled.div``;

export default function Index(props) {
  const {fatherdata, updata} = props; //查看
  const [table, settable] = useState([]);
  const [visible, setVisible] = useState({
    openModal: false,
    btnEvent: '',
    editdata: '',
    msg: '',
  });
  const [page, setPage] = useState({
    total_count: 0, // 总页数
    page_no: 1, // 当前页码
    page_size: 100, // 每页数据条数
  });
  const columns = [
    {
      title: '菜品id',
      dataIndex: 'id',
      key: 'id',
      render: (name) => name,
    },
    {
      title: '菜品名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <Tag key={Math.random}>{text}</Tag>,
    },

    {
      title: '菜品分类',
      dataIndex: 'type',
      key: 'type',
      render: (name) => setOrderStatus(name),
    },
    {
      title: '菜品标签',
      dataIndex: 'tags',
      key: 'tags',
      // render: (tags) => (
      //   <>
      //     {tags.map((tag) => {
      //       return (
      //         <Tag color="#65dad5" key={tag}>
      //           {tag}
      //         </Tag>
      //       );
      //     })}
      //   </>
      // ),
    },
    {
      title: '菜品图',
      dataIndex: 'icon',
      key: 'icon',
      render: (tu) => <img style={{width: '100px'}} src={tu} />,
    },
    {
      title: '菜品价格',
      dataIndex: 'price',
      key: 'price',
      render: (text) => <Tag>{text}</Tag>,
    },
    {
      title: '菜品状态',
      key: 'status',
      dataIndex: 'status',
      render: (text, record) => (
        <Switch
          checkedChildren="上架"
          unCheckedChildren="下架"
          defaultChecked={record.status}
          onClick={() => DishStatusChange(record)}
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 300,
      render: (text, record) => (
        <Space size="middle">
          <a  onClick={() => fatherdata(record, 'edit')}>修改</a>
          <a onClick={() => opreAction(record.id, 'memuDelete')}>删除</a>
        </Space>
      ),
    },
  ];
  const getlist = () => {
    axios({
      method: 'GET',
      url: '/food/queryAllFood',
      params: {},
    })
      .then((res) => {
        console.log(res);
        settable(res.data);
      })
      .catch((err) => {});
  };
  useEffect(() => {
    getlist();
  }, []);
  useEffect(() => {
    console.log(updata,'更新')
    if (updata) {
      getlist();
    }
  }, [updata]);
  const opreAction = (id, btn) => {
    console.log(id, btn);
    return setVisible(() => {
      return {
        openModal: true,
        btnEvent: btn,
        editdata: id,
        msg: '确认删除此商品?',
      };
    });
  };
  const data = [
    {
      menuId: 1,
      key: '1',
      menuName: '回锅肉',
      menuSort: 1, //1.热菜 2.凉菜 3.甜点西餐 4.酒水饮料
      menuTag: ['热菜', '凉菜'],
      menuImage: 'http://........',
      menuPrice: 998,
      menuStatus: 1, //0.下架,1.上架
    },
    {
      key: '2',
      menuName: '回锅肉',
      menuSort: 2, //1.热菜 2.凉菜 3.甜点西餐 4.酒水饮料
      menuTag: ['热菜', '凉菜'],
      menuImage: 'http://........',
      menuPrice: 998,
      menuStatus: 0, //0.下架,1.上架
    },
    {
      key: '3',
      menuName: '回锅肉',
      menuSort: 3, //1.热菜 2.凉菜 3.甜点西餐 4.酒水饮料
      menuTag: ['热菜', '凉菜'],
      menuImage: 'http://........',
      menuPrice: 998,
      menuStatus: 1, //0.下架,1.上架
    },
    {
      key: '4',
      menuName: '回锅肉',
      menuSort: 4, //1.热菜 2.凉菜 3.甜点西餐 4.酒水饮料
      menuTag: ['热菜', '凉菜'],
      menuImage: 'http://........',
      menuPrice: 998,
      menuStatus: 1, //0.下架,1.上架
    },
  ];

  const setOrderStatus = (v) => {
    console.log('菜品状态', v);

    switch (Number(v)) {
      case 1:
        return (
          <Tag color="red" key={Math.random}>
            热菜
          </Tag>
        );
      case 2:
        return (
          <Tag color="grey" key={Math.random}>
            凉菜
          </Tag>
        );
      case 3:
        return (
          <Tag color="geekblue" key={Math.random}>
            甜点西餐
          </Tag>
        );
      case 4:
        return (
          <Tag color="#f50" key={Math.random}>
            酒水饮料
          </Tag>
        );
      default:
    }
  };
  const onChange = (page, pageSize) => {
    console.log(page, pageSize);
  };
  const getTableList = () => {
    console.log('getTableList');
  };
  const closeModalFn = (e) => {
    if (e === 'memuDelete') {
      axios({
        method: 'POST',
        url: '/food/deleteFood',
        data: {foodId: visible.editdata},
      })
        .then((res) => {
          console.log(res);
          getlist();
          // settable(addKey(res.data.data));
        })
        .catch((err) => {});
      console.log('刷新');
    }
    return setVisible(() => {
      return {
        openModal: '',
        btnEvent: '',
        editdata: '',
        msg: '',
      };
    });
  };
  const DishStatusChange = (e) => {
    if (e.status === 0) {
      //上架
      axios({
        method: 'POST',
        url: 'food/shelfOn',
        data: {foodId: e.id},
      })
        .then((res) => {
          console.log(res);
          message.success(res.message);
          getlist();
        })
        .catch((err) => {});
    } else {
      axios({
        method: 'POST',
        url: '/food/shelfDown',
        data: {foodId: e.id},
      })
        .then((res) => {
          console.log(res);
          message.success(res.message);
          getlist();
        })
        .catch((err) => {});
    }
  };
  return (
    <Wrapper>
      <Table
        columns={columns}
        pagination={{
          position: ['bottomRight'],
          size: 'small',
          showQuickJumper: true,
          defaultCurrent: 1,
          total: page.total_count,
          pageSize: page.page_size,
          current: page.page_no,
          showSizeChanger: true,
          showTotal: (total) => `共${total}条`,
          onChange: (pageNo, pageSize) => getTableList(pageNo, pageSize),
        }}
        dataSource={table}
        scroll={{x: 1500, y: 500}}
      />
      <OperaModal
        visible={visible.openModal}
        btnEvent={visible.btnEvent}
        editdata={visible.editdata}
        msg={visible.msg}
        closeModalFn={closeModalFn}
      />
    </Wrapper>
  );
}
